@use 'sass:math';
@use 'sass:map';
@use 'sass:color';

$border-radius: () !default;

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
	$scrollbar: (),
	$border-radius: map.merge(
			(
				'base': 5px
			),
			$border-radius
		)
);

@use 'element-plus/theme-chalk/src/index.scss' as *;

// Element-plus
.el-input-number {
	&__decrease,
	&__increase {
		border: 0 !important;
		background-color: transparent;
	}
}

.el-message,
.el-overlay.is-message-box {
	z-index: 10000 !important;
}

.el-message {
	&.el-message--success,
	&.el-message--error,
	&.el-message--info,
	&.el-message--warning {
		border-radius: 6px;
	}

	&__icon {
		font-size: 18px;
	}
}

.el-message-box {
	border-radius: 12px;
	padding: 20px;

	&__header {
		padding-bottom: 20px;
	}

	&__headerbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		width: 28px;
		border-radius: 28px;
		margin: 10px 10px 0 0;
		display: none;

		.el-icon {
			color: var(--el-text-color-primary);
			font-weight: bold;
			font-size: 18px;
		}

		&:hover {
			background-color: var(--el-fill-color-darker);

			.el-icon {
				color: var(--el-text-color-primary);
			}
		}
	}

	&__content {
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 768px) {
	.el-message-box {
		width: 90% !important;
	}
}
.el-dialog {
	--el-dialog-box-shadow: none;
}

.el-button {
	outline: none;
}

.el-table {
	&__header {
		.cell {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.el-popper {
	border-radius: 6px;

	.el-scrollbar {
		border-radius: inherit;
	}

	.el-dropdown-menu {
		padding: 5px;

		&__item {
			border-radius: 6px;
		}
	}

	&__arrow {
		display: none;
	}
}

/*.el-cascader-panel>div .el-checkbox {
	display: none
}
.el-cascader-panel>div:last-child .el-checkbox {
	display: block
}*/
.el-select,.el-cascader,.el-input-number{
	width: 100%;
}
.el-dialog {
	/* 更具商业化质感的背景，比如渐变 */
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	border-radius: 12px; /* 圆润边角 */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 更柔和的阴影，增强立体感 */
}
.el-dialog__title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}
.el-dialog__body {
	padding: 24px;
}
.el-dialog__footer{
	padding-right: 24px;
}
.el-pagination{
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translate(-50%, -50%);
	/*margin-bottom: 12px;*/
}
.main {
	background-color: var(--el-bg-color);
	padding: 0 12px;
	height: 100%;
	overflow-y: scroll;
	min-height: 90%;
	.custom-tree-node .node-label{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 240px;
	}
	.main-content{
		border: 1px solid #f3f3f3;
		border-radius: 8px;
		margin-top: 12px;
		padding: 0 10px 40px 10px;
		.mc-item{
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}
		.mc-item2{
			width: 100%;
			float: left;
			text-align: left;
		}
	}
	.main-content1{
		border: 1px solid #f3f3f3;
		border-radius: 8px;
		margin-top: 12px;
		padding: 0 10px;
		width: 300px;
		background: aliceblue;
		float: left;
		margin-right: 20px;
		height: 380px;
		overflow-y: auto;
		img{
			cursor: pointer;
			height: 230px;
			margin: 18px auto;
		}
		.mc-item1{
			text-align: center;
			margin: 0 auto;
		}
	}
	.main-search{
		padding-top: 12px;
		font-size: 14px;
	}
	.main-search_btn{
		margin-bottom: 12px;
		font-size: 14px;
	}
	.node-label {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 6px;
		max-width: 340px;  /* 新增：设置最大宽度 */
		display: inline-block; /* 确保宽度限制生效 */
	}
	.font14{
		font-size: 14px;
	}
	.custom-style{
		margin: 12px 0;
		line-height: 32px;
		.font14{
			float: left;
		}
		/*.el-segmented {
			--el-segmented-item-selected-color: var(--el-text-color-primary);
			--el-segmented-item-selected-bg-color: #d0f4ff;
			--el-border-radius-base: 16px;
		}*/
		.top-item_title{
			width: 88px;
			float: left
		}

		.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner{
			background-color: var(--el-color-success-light-9);
			border-color: rgb(220, 223, 230);
			box-shadow: none;
			color: var(--el-color-success);
		}

		.el-checkbox-button.is-active,.el-checkbox-button.is-checked {
			--el-checkbox-button-checked-bg-color: var(--el-color-success-light-9);
			--el-checkbox-button-checked-text-color: var(--el-color-success);
			--el-checkbox-button-checked-border-color: rgb(220, 223, 230);
		}
		.el-checkbox-button.is-focus .el-checkbox-button__inner{
			border-color: rgb(220, 223, 230);
			color: var(--el-color-success);
		}
		.el-checkbox-button__inner:hover{
			color: var(--el-color-success);
		}
	}
	.custom-styles{
		margin: 12px;
		width: 100%;
		font-weight: bold;
	}
	.pagination{
		float: right;
		margin: 18px;
	}
	.ams-edit{
		top: 4px;
		color:#004cff;
		margin-left:12px;
		margin-right:12px;
		cursor: pointer
	}
	.ams-delete{
		top: 3px;
		color:red;
		margin-right:12px;
		cursor: pointer
	}
}

a{
	cursor: pointer!important;
}
.equation-top-item-content {
	width: auto;
	max-width: 1290px;
	/*height: calc(100% - 76px);*/
	padding: 6px;
	/*border-radius: 8px;*/
	background: #f3f5f9;
	margin-top: 12px;
	display: flex;
	overflow-x: auto;
	height: 124px;

	.equation-top-item-bg {
		max-height: 190px;
		height: 100%;
		border-radius: 6px;
		background: #fff;
		margin-right: 6px;
		padding: 10px 6px 10px 10px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		flex-shrink: 0
	}

	.equation-top-item-bg .equation-top-dom-item {
		min-width: 36px;
		height: 36px;
		line-height: 36px;
		padding: 0 4px;
		text-align: center;
		border-radius: 4px;
		background: #f3f5f9;
		margin: 0 6px 6px 0;
		cursor: pointer;
		position: relative;
		font-size: 24px;
		font-family: math;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.equation-top-item-bg .equation-top-dom-item-image {
		height: 100%
	}

	.equation-top-item-bg .formula_all_bg_image {
		max-width: unset;
		vertical-align: unset;
		width: 2000px;
		height: 327px;
		margin-left: -835px;
		margin-top: -180px;
		margin-bottom: -110px
	}

	.equation-top-item-bg .equation-top-dom-function-item {
		min-width: 92px;
		width: 90px;
		height: 50px;
		line-height: 50px
	}

	.equation-left, .equation-right {
		box-sizing: border-box;
		height: 100%;
		position: relative
	}
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
	width: 2px; /* 垂直滚动条宽度 */
	height: 2px; /* 水平滚动条高度 */
}
/* 强制覆盖 */
::-webkit-scrollbar,
::-webkit-scrollbar-horizontal {
	width: 2px !important;
	height: 2px !important;
}
::-webkit-scrollbar-track {
	background: #f1f1f1; /* 轨道背景 */
	border-radius: 3px;
}

::-webkit-scrollbar-thumb {
	background: #c1c1c1; /* 滑块颜色 */
	border-radius: 3px;
	transition: all 0.2s;
}

::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8; /* 鼠标悬停时颜色 */
}

.chapters-left{
	margin: 0 0 20px 0;
	width: 30%;
	float: left;
	text-align: center;
	.ct-item{
		width: 100%;
		float: left;
		margin-bottom: 6px;
		.ct-item_left{
			width: 40%;
			height: 166px;
			float: left;
			img{
				/*height: 150px;*/
				margin: 0 auto
			}
		}
		.ct-item_right{
			width: 60%;
			height: 166px;
			float: left;
			text-align: left;
			padding-top: 36px;
			.title0{
				font-size: 16px;
				font-weight: bold;
			}
			.icon0{
				font-size: 16px;
				position: relative;
				top: 3px;
				margin-right: 6px;
			}
		}
	}
}
.chapters-right{
	width: 70%;
	float: left;
}
.ams-latex {
	display: flex;
	margin-bottom: 18px;
	/*padding: 0 12px;*/
	.equation-sidebar {
		/*width: 25%;*/
		height: calc(72vh);
		.formula-title{
			font-size: 14px;
			font-weight: 700;
			margin-bottom: 12px;
		}
		.formula-list {
			margin-top: 16px;
			overflow-y: scroll;
			height: calc(100% - 90px);
			display: flex;
			flex-wrap: wrap;
			width: 270px;

			.formula-item {
				cursor: pointer;
				flex: 1 1 100%;
				margin-bottom: 20px;

				.formula-box {
					padding: 0 12px;
					border-radius: 4px;
					border: 1px solid #ddd;
					font-family: Courier New, Courier, monospace;
					max-width: 300px;
					background-color: #fff;
					width: 100%;
					text-align: left;
					cursor: pointer;
					overflow: hidden;
				}

				.formula-box:hover, .formula-box:focus {
					background-color: rgba(33, 41, 48, .06);
				}
			}
		}

		.formula-list h3 {
			margin-bottom: 20px;
			font-weight: 600;
			flex: 0 0 100%;
			font-size: 16px
		}

		.formula-list > span {
			font-size: 13px;
			margin-bottom: 6px;
			display: block;
			font-weight: 400;
			line-height: 22px;
			flex: 0 0 100%;
		}
	}

	.equation-editor-area {
		/*margin-left: 15px;*/
		width: 100%;
		height: 100%;
		position: relative;
		background: white;
		padding: 8px;
		.ee-item{
			margin-bottom: 12px;
			padding-bottom: 12px;
			width: 160px;
			float: left;
			.el-button{
				position: absolute;
			}
		}
		.icon-close{
			position: absolute;
			font-size: 18px;
			right: 0;
			top: 0;
			cursor: pointer
		}
		/*padding-top: 20px;*/
		.equation-top-header {
			width: 100%;
			height: 30%;
			/*border-radius: 8px;*/
			/*border: 1px solid rgba(33, 41, 48, .12);*/
			background: #fff;
			/*box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .05);*/
			/*margin-bottom: 15px;
			padding: 16px;*/
			box-sizing: border-box;
			min-height: 136px;
			padding-right: 18px;

			.equation-top-title-content {
				position: relative;

				.equation-top-title-list-left {
					position: absolute;
					left: 0;
					top: 0;
					width: 71px;
					height: 44px;
					background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), #fff 38.03%);
					align-items: center;
					display: none
				}

				.equation-top-title-list-left .equ-left-arrow {
					width: 40px;
					height: 40px;
					padding: 10px;
					border-radius: 30px;
					border: 1px solid rgba(33, 41, 48, .12);
					background: #fff;
					box-sizing: border-box
				}

				.equation-top-title-list-right {
					position: absolute;
					right: 0;
					top: 0;
					width: 71px;
					height: 44px;
					align-items: center;
					justify-content: flex-end;
					display: none;
					background: linear-gradient(270deg, #fff 64.79%, hsla(0, 0%, 100%, 0))
				}

				.equation-top-title-list-right .equ-right-arrow {
					width: 40px;
					height: 40px;
					padding: 10px;
					border-radius: 30px;
					border: 1px solid rgba(33, 41, 48, .12);
					background: #fff;
					text-align: right;
					box-sizing: border-box
				}

				.equation-top-title-list {
					display: flex;
					height: 44px;
					transition: transform .5s ease;
					scroll-behavior: smooth;
					overflow: hidden;

					.equation-top-title_item {
						list-style: none;
						padding: 0 24px;
						display: flex;
						align-items: center;
						border-radius: 6px;
						border: 1px solid rgba(33, 41, 48, .12);
						max-width: 189px;
						margin-right: 12px;
						cursor: pointer;
						flex-shrink: 0;
						img{
							width: 14px;
							height: 14px;
						}
					}

					.active {
						color: #056fd7;
						border-radius: 6px;
						border: 1px solid #067bef;
						background: rgba(5, 111, 215, .1)
					}
				}
			}

		}

	}
}
.ams-latex_up{
	display: block;
	.equation-editor-area{
		width: 100%;
		float: left; margin-bottom: 18px;
	}
	.equation-editor-close{
		position: absolute;
		right: 6px;
		top: 4px;
		cursor: pointer;
	}
}
.latex-item{
	position: relative;
	.el-input__inner{
		padding-right: 22px;
	}
	.upload{
		position: absolute;
		right: 30px;
		top: 6px;
		cursor: pointer;
		font-size: 18px
	}
	.latex{
		position: absolute;
		width: 22px;
		right: 6px;
		top: 4px;
		cursor: pointer;
		font-size: 18px
	}
}
.is-dark{
	max-width: 300px;
}